<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/mc.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function validarCampos(campo) {
	if(campo.id == 'email'){
		 var re = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/;
				if(campo.value == ''){
					return;
				}
		    	if(!re.exec(campo.value))    {
			    	alert("La dirección de email es incorrecta.");
					  campo.style.color='red';
					  campo.focus();
					  campo.select();
			    }else{
			    	document.getElementById("email").style.color='blue';
			    }
					
	} if(campo.id == 'tel'){
		if(campo.value == ''){
			return;
		}
		if(isNaN(campo.value)||campo.value.length < '7'){
			alert("Debe introducir un valor numerico de\n7 o 9 cifras");
			campo.style.color='red';
			campo.focus();
			campo.select();
		}else{
			document.getElementById("tel").style.color='blue';
		}	
	}if(campo.id == 'login'){
		if(campo.value == ''){
			return;
		}
		if(campo.value.length < '8'){
			alert("Login no debe ser menor a 8 cifras");
			campo.style.color='red';
			campo.focus();
			campo.select();
		}else{
			document.getElementById("login").style.color='blue';
		}
	}
	if(campo.id == 'password'){
		if(campo.value == ''){
			return;
		}
		if(campo.value.length < '6'){
			alert("Password no debe ser menor a 6 cifras");
			campo.style.color='red';
			campo.focus();
			campo.select();
		}else{
			document.getElementById("password").style.color='blue';
		}
	}
}
function activaBoton() {
	var retorno = 0;
	var elementos = document.forms[0].elements.length;
	var obj = document.getElementById("boton01");

	for(i=0; i < elementos; i++){
		if(document.forms[0].elements[i].type == 'text' && document.forms[0].elements[i].name != 'email' ){
			if(document.forms[0].elements[i].value != '' ){
				document.forms[0].elements[i].style.backgroundColor = '#91E148';
				retorno ++ ;
			}else{
				document.forms[0].elements[i].style.backgroundColor = '#ff0000';
				document.forms[0].elements[i].style.color = '#ffffff';
				}
			}
		}

	if (retorno == 6 ){
		obj.disabled = false;
	}
	if (retorno < 6){
		obj.disabled = true;
	}
}
</script>
</head>


<body>

	
	<table>
	
		<tr>
			
			<!--  aqui va el cuerpo -->
			<td class="control" >
			
				<form action="usuario.do"  method="post" >
				  			
				  	<input type="hidden" name="operacion" value="insertar" />
				  			
				<table>
					<tr class="titulo" >
						<td colspan="2" align="center" > Registro de  Usuarios </td>
					</tr>
					<tr class="control" >
						<td>Tipo de usuario: </td>
						<td> 
						<c:if test="${requestScope.li_tipos!=null}">
							<select name="tipo">
								<c:forEach var="tip"  
									items="${requestScope.li_tipos}" >
									<c:if test="${tip.codTipo != 'TIP02'}">
									<option value="${tip.codTipo}">${tip.descTipo}</option>
									</c:if>
								</c:forEach>
							</select>
						</c:if>
						 </td>
					</tr>
					<tr class="control" >
						<td>Nombre: </td>
						<td> <input type="text" name="nombre" id="nombre" size="25" onblur="activaBoton();"> </td>
					</tr>
					<tr class="control" >
						<td>Apellido  Paterno: </td>
						<td> <input type="text" name="apePat" id="apePat" size="10" onblur="activaBoton();"> </td>
					</tr>
					<tr class="control" >
						<td>Apellido  Materno: </td>
						<td> <input type="text" name="apeMat" id="apeMat" size="10" onblur="activaBoton();"> </td>
					</tr>
					<tr class="control" >
						<td>Distrito: </td>
						<td> 
						<c:if test="${requestScope.li_distritos!=null}">
							<select name="distrito">
								<c:forEach var="dis"  
									items="${requestScope.li_distritos}" >
								<option value="${dis.codigo}">${dis.descripcion}</option>
								</c:forEach>
							</select>
						</c:if>
						 </td>
					</tr>
					<tr class="control"  >
						<td>Sexo: </td>
						<td> 
						<select name="sexo" >
							<option value="M" > Masculino </option>
							<option value="F" > Femenino </option>
						</select> 
						</td>
					</tr>
					<tr class="control" >
						<td>Telefono: </td>
						<td> <input type="text" name="tel" id="tel" size="10" maxlength="9" onblur="activaBoton();validarCampos(this);" > </td>
					</tr>
					<tr class="control" >
						<td>E-mail: </td>
						<td> <input type="text" name="email" id="email" size="10" onblur="validarCampos(this);" > </td>
					</tr>
					<tr class="control" >
						<td>Login: </td>
						<td> <input type="text" name="login" id="login" size="10" maxlength="10" onblur="activaBoton();validarCampos(this);"> </td>
					</tr>
					<tr class="control" >
						<td>Password: </td>
						<td> <input type="text" name="password" id="password" size="8" maxlength="8"  onblur="activaBoton();validarCampos(this);"> </td>
					</tr>
					<tr class="control" >
						<td colspan="2" align="right"  > 
							<input 
								type="submit" 
								name="boton01"
								id="boton01" 
								value="Registrar" 
								disabled="disabled"> 
						</td>
						<td colspan="2" align="right"  > 
							<a href="usuario.do?operacion=listar"><img src="images/btndtsal.JPG"/></a>
						</td>
					</tr>
				</table>
				
				</form>

			</td>
			
			
		</tr>


		
	</table>
	

</body>
</html>